<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <style type="text/css">
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  </style>
  <link rel="stylesheet" href="style.css">
  <title>Kanahei Usagi & Piske</title>
</head>

<body ontouchstart>
<style id="style"></style>
<div id="text-container">
  <div id="text"></div>
</div>
<div id="buttons">
  <svg class="icon" id="btnPlayPause">
    <use xlink:href="#icon-pause"></use>
  </svg>
  <svg class="icon" id="btnSlow">
    <use xlink:href="#icon-slow"></use>
  </svg>
  <svg class="icon activated" id="btnNormal">
    <use xlink:href="#icon-normal"></use>
  </svg>
  <svg class="icon" id="btnFast">
    <use xlink:href="#icon-fast"></use>
  </svg>
</div>
<div id="main">
  <div class="usagi-container">
    <div class="usagi">
      <div class="ear left"></div>
      <div class="ear right"></div>
      <div class="face">
        <div class="nose"></div>
        <div class="mouth upper"></div>
        <div class="mouth lower"></div>
      </div>
      <div class="eye"></div>
      <div class="flush"></div>
    </div>
  </div>
  <div class="piske-container">
    <div class="piske">
      <div class="eye"></div>
      <div class="mouth"></div>
      <div class="flush"></div>
    </div>
  </div>
</div>

<script src="//at.alicdn.com/t/font_1566775_w0nci02nxxn.js"></script>
<script src="main.js"></script>
</body>

</html>